<%--
  Created by IntelliJ IDEA.
  User: wangqingbo
  Date: 2023/10/31
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入jstl标签库
uri：标签库的地址
prefix：前缀
-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>项目列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
    <!-- 引入jquery的包，Bootstrap依赖jQuery，要把jQuery的包放在前面-->
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!-- 引入Bootstrap的包 -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        // 页面加载完成就会执行方法
        $(function (){
            // 弹窗
            //alert("项目列表");
            // 控制台打印
            //console.log("项目列表");
            // 初始化数据
            initPrjData();

        });
     // 初始化项目数据
     function initPrjData(prjName,prjCode,currentPage,pageSize)
     {
         //alert("初始化数据");
         // 请求数据，使用ajax的post方法
         /**
          url:发送请求地址。
          data:待发送 Key/value 参数。
          callback:发送成功时回调函数。
          type:返回内容格式，xml, html, script, json, text, _default。
          */
         $.post("getProjectInfoByParamsPage",
             {"projectName":prjName,"projectCode":prjCode,"currentPage":currentPage,"pageSize":pageSize},
             function(data){
             //console.log(data);
             // 清空数据
             $(".trPrjData").remove();
             // 循环数据列表
             $(data.list).each(function (i,e){
                 var tr1 = "<tr class='trPrjData'>";
                 // 项目名称
                 var td1 = "<td>"+e.projectName+"</td>";
                 // 项目编码
                 var td2 = "<td>"+e.projectCode+"</td>";
                 // 电压等级
                 var td3 = "<td>"+e.voltage+"</td>";
                 // 项目类型
                 var td4 = "<td>"+e.projectType+"</td>";
                 // 创建人
                 var td5 = "<td>"+e.createUser+"</td>";
                 // 创建时间
                 var td6 = "<td>"+e.createDate+"</td>";
                 var files = "";
                 // 附件
                 $(e.fileList).each(function(i,f){
                     files += "<a href='download?id="+f.id+"'>" + f.originalName + "</a><br>";
                 });
                 var td61 = "<td>"+files+"</td>";
                 var td7 = "<td><a href='upload.jsp?projectId="+e.projectId+"'>上传附件</a></td>";
                 var tr2 = "</tr>";

                 //console.log(e.projectId);
                 // 把数据放到表格最后一行的前面
                 $("tr:last").before($(tr1+td1+td2+td3+td4+td5+td6+ td61 +td7+tr2));
             });
             // 分页信息，数据条数
             $("#recordCount").text(data.pageView.recordCount);
             $("#pageSize").text(data.pageView.pageSize);
             $("#currentPage").text(data.pageView.currentPage);
             $("#pageCount").text(data.pageView.pageCount);
         },"json");

     }
     // 搜索数据
     function searchPrj()
     {
         // 项目名称
         var prjName = $("#projectName").val();
         // 项目编码
         var prjCode = $("#projectCode").val();
         //alert("搜索数据:" + prjName + "," + prjCOde);
         // 初始化数据
         initPrjData(prjName,prjCode);
     }
      // 首页
     function firstPage()
     {
     // 项目名称
     var prjName = $("#projectName").val();
     // 项目编码
     var prjCode = $("#projectCode").val();
     // 当前页设置为1
     var currentPage = 1;
     // pageSize参数要从页面去取
     var pageSize = $("#pageSize").text();
     // 初始化数据
     initPrjData(prjName,prjCode,currentPage,pageSize);
     }
    // 尾页
    function lastPage()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为总页数
        var currentPage = $("#pageCount").text();
        // pageSize参数要从页面去取
        var pageSize = $("#pageSize").text();
        // 初始化数据
        initPrjData(prjName,prjCode,currentPage,pageSize);
    }
    // 上一页
    function prePage()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为 当前页 - 1
        var currentPage = parseInt($("#currentPage").text()) - 1;
        // 如果当前页小于1，则设置为1
        if (currentPage <= 1)
        {
            currentPage = 1;
        }
        // pageSize参数要从页面去取
        var pageSize = $("#pageSize").text();
        // 初始化数据
        initPrjData(prjName,prjCode,currentPage,pageSize);
    }
    // 下一页
    function nextPage()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为 当前页 + 1
        var currentPage = parseInt($("#currentPage").text()) + 1;
        // 如果当前页大于总页数，则设置为总页数
        var pageCount = parseInt($("#pageCount").text());
        if (currentPage >= pageCount)
        {
            currentPage = pageCount;
        }
        // pageSize参数要从页面去取
        var pageSize = $("#pageSize").text();
        // 初始化数据
        initPrjData(prjName,prjCode,currentPage,pageSize);
    }

    </script>
  <style type="text/css">
      .tableStyle{
          border: 1px solid black;
      }
  </style>
</head>
<body>
项目名称：<input type="text" name="projectName" id="projectName" />
项目编码：<input type="text" name="projectCode" id="projectCode" />
项目时间：<input type="text" name="projectCreateDate" id="projectCreateDate" readonly />
<button type="button" class="btn btn-primary" value="搜索" onclick="searchPrj()">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<br>
<script type="text/javascript">
    $("#projectCreateDate").datetimepicker({
        language: 'zh-CN',
        autoclose:true,
        format: 'yyyy-mm-dd hh:ii:ss',
        minView:0
    });
</script>
项目列表：<br>
<table class="table table-hover">
    <tr >
        <td>项目名称</td>
        <td>项目编码</td>
        <td>电压等级</td>
        <td>项目类型</td>
        <td>创建人</td>
        <td>创建时间</td>
        <td>附件</td>
        <td>操作</td>
    </tr>

    <tr >
        <td>共<span id="recordCount"></span>条</td>
        <td>共<span id="pageCount"></span>页</td>
        <td>当前第<span id="currentPage"></span>页</td>
        <td>每页<span id="pageSize"></span>条</td>
        <td><a href="javascript:void(0)" onclick="firstPage()">首页</a><a href="javascript:void(0)" onclick="lastPage()">尾页</a></td>
        <td><a href="javascript:void(0)" onclick="prePage()">上一页</a><a href="javascript:void(0)" onclick="nextPage()">下一页</a></td>
    </tr>
</table>
</body>
</html>
